<template>
    <div class="userCenter">
        <van-notice-bar  :text="notice" :left-icon="iconUrl" />
        <div class="topImg">
            <img src="@/assets/images/default.png" alt="">
        </div>
        <div class="userName" v-if="isLogin">{{userInfo.userName}}，您好</div>
        <div class="loginRegedit clearfix" v-else>
            <van-button type="default" class="login" @click="goLogin">登录</van-button>
            <van-button type="primary" class="regedit" @click="goRegister">注册</van-button>
        </div>
        <div class="myInfos">
            <van-collapse v-model="activeNames" style="margin-top: 50px;">
                <van-collapse-item title="会员卡" name="4" icon="" change="hope" ></van-collapse-item>
                <van-collapse-item title="我的订单" name="3" icon=""></van-collapse-item>
                <van-collapse-item title="我的权益" name="5" icon="" @click="hope" ></van-collapse-item>
                <van-collapse-item title="收货地址" name="1">
                    {{userInfo.address}}
                </van-collapse-item>
                <van-collapse-item title="联系我们" name="2">
                    请联系<a href="tel:15700051782">15700051782</a> 天猫小店 谢生
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>

<script>
    import { Toast } from "vant";
    export default{
        data(){
            return{
                message:'会员中心',
                isLogin: false,
                userInfo: {},
                activeNames: ['0'],
                iconUrl: '//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png',
                notice: '【狂欢双十一】最低5折起###手淘下单立返1.2元现金红包###欢迎来店体验······【折扣商品】花弄影抽纸凡花絮事系列2层150抽*4小包 7.5折  仅售 6.6/提###舒肤佳香皂  8折 仅售3.9元/个  '
            }
        },
        created(){ //一进入页面就判断，本地数据库有没有用户信息，如果有提示用户已登录，直接到首页
            if(localStorage.userInfo){
                this.isLogin = true;
                this.userInfo = JSON.parse(localStorage.userInfo)
            } else {
                this.isLogin = false;
            }
        },
        watch: {
            activeNames(val) {
                let i = val.length - 1;
                switch(val[i]){
                    case '3':
                        val.pop(val[i])
                        this.$router.push("/OrderList");
                        break;
                    case '4':
                        this.hope();
                        val.pop(val[i])
                        break;
                    case '5':
                        this.hope();
                        val.pop(val[i])
                        break;
                }
            }
        },
        methods:{
            goLogin(){
                this.$router.push('/Login')
            },
            goRegister(){
                this.$router.push('/Register')
            },
            hope(){
                Toast("敬请期待")
            }
        }
    }
</script>

<style scoped>
.userCenter{
    background-color: #fff;
}
.topImg{
    width: 100%;
    height: 120px;
    background-color: skyblue;
    text-align: center;
}
.topImg img{
    width: 50px;
    height: 50px;
    margin-top: 25px;
}
.userName {
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
    margin-top: -30px;
}
.loginRegedit{
    padding: 10px 20%;
}
.login,.regedit{
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.login{
    float: left;
}
.regedit{
    float: right;
}
.myInfos{
   margin-top: 20px;
}
li{
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid #f0f0f0;
}
li span{
    font-size: 0.8rem;
    color: #666;
    float:left;
}
li .arrow{
    float: right;
    vertical-align: middle;
    margin-top: 10px;
}
</style>